﻿<MudPaper Class="py-3" Elevation="0">
        <MudAppBar Fixed="false">
            Test Application
            <MudMenu Class="ml-4" Dense PositionAtCursor>
                <ActivatorContent>
                    @{
                        var priority = "1";
                        switch (priority)
                        {
                            case "1":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #FED6D3">Priority 1</MudChip>
                                break;
                            case "2":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #FDDFCA">Priority 2</MudChip>
                                break;
                            case "3":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #F6E8A7">Priority 3</MudChip>
                                break;
                            case "4":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #C8ECFA">Priority 4</MudChip>
                                break;
                            case "5":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #CEDFFD">Priority 5</MudChip>
                                break;
                            case null:
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled">None</MudChip>
                                break;
                        }
                    }
                </ActivatorContent>
                <ChildContent>
                    <div style="min-width: 100px">
                        <MudMenuItem style="font-weight: normal; color: black; background-color: #FED6D3">Priority 1</MudMenuItem>
                        <MudMenuItem style="font-weight: normal; color: black; background-color: #FDDFCA">Priority 2</MudMenuItem>
                        <MudMenuItem style="font-weight: normal; color: black; background-color: #F6E8A7">Priority 3</MudMenuItem>
                        <MudMenuItem style="font-weight: normal; color: black; background-color:#C8ECFA">Priority 4</MudMenuItem>
                        <MudMenuItem style="font-weight: normal; color: black; background-color:#CEDFFD">Priority 5</MudMenuItem>
                        <MudMenuItem>None</MudMenuItem>
                    </div>
                </ChildContent>
            </MudMenu>
            <MudMenu Class="ml-4" Dense PositionAtCursor>
                <ActivatorContent>
                    @{
                        var priority = "1";
                        switch (priority)
                        {
                            case "1":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #FED6D3">Priority 1</MudChip>
                                break;
                            case "2":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #FDDFCA">Priority 2</MudChip>
                                break;
                            case "3":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #F6E8A7">Priority 3</MudChip>
                                break;
                            case "4":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #C8ECFA">Priority 4</MudChip>
                                break;
                            case "5":
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #CEDFFD">Priority 5</MudChip>
                                break;
                            case null:
                                <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled">None</MudChip>
                                break;
                        }
                    }
                </ActivatorContent>
                <ChildContent>
                    <div style="min-width: 100px">
                        <MudMenuItem style="font-weight: normal; color: black; background-color: #FED6D3">Priority 1</MudMenuItem>
                        <MudMenuItem style="font-weight: normal; color: black; background-color: #FDDFCA">Priority 2</MudMenuItem>
                        <MudMenuItem style="font-weight: normal; color: black; background-color: #F6E8A7">Priority 3</MudMenuItem>
                        <MudMenuItem style="font-weight: normal; color: black; background-color:#C8ECFA">Priority 4</MudMenuItem>
                        <MudMenuItem style="font-weight: normal; color: black; background-color:#CEDFFD">Priority 5</MudMenuItem>
                        <MudMenuItem>None</MudMenuItem>
                    </div>
                </ChildContent>
            </MudMenu>
        </MudAppBar>
        <MudPaper style="width: 70px;">
            @* On initial load these don't respect the mouseover leave event only activating and not deactivating *@
            <MudNavMenu>
                @foreach (var menu in _menuList)
                {
                    <MudMenu Icon="@Icons.Material.Filled.Mouse" FullWidth="true" ActivationEvent="@MouseEvent.MouseOver"
                             AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.CenterLeft">
                        <ChildContent>
                            <MudText Class="d-flex justify-center">@($"Menu {menu}")</MudText>
                            <MudDivider Class="mb-2" />
                            <MudMenuItem Icon="@Icons.Material.Outlined.Dashboard" Label="Sub item 1" />
                            <MudMenuItem Icon="@Icons.Material.Outlined.Dashboard" Label="Sub item 2" />
                            <MudMenuItem Icon="@Icons.Material.Outlined.Dashboard" Label="Sub item 3" />
                            <MudMenuItem Icon="@Icons.Material.Outlined.Dashboard" Label="Sub item 4" />
                            <MudMenuItem Icon="@Icons.Material.Outlined.Dashboard" Label="Sub item 5" />
                            <MudMenuItem Icon="@Icons.Material.Outlined.Dashboard" Label="Sub item 6" />
                        </ChildContent>
                    </MudMenu>
                }
            </MudNavMenu>
        </MudPaper>
        <div class="d-flex justify-center align-center mud-height-full">
            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(() => _visible = !_visible)">Click</MudButton>
            <MudMenu Label="Open Nested Menu" Variant="@Variant.Filled" Class="ml-2" Dense>
                <MudMenuItem Label="Add reaction" />
                <MudMenuItem Label="Add bookmark" />
                <MudMenu Label="Format">
                    <MudMenu Label="Text" StartIcon="@Icons.Material.Filled.FormatBold">
                        <MudMenuItem Label="Bold" Icon="@Icons.Material.Filled.FormatBold" />
                        <MudMenuItem Label="Italic" Icon="@Icons.Material.Filled.FormatItalic" />
                        <MudMenuItem Label="Underline" Icon="@Icons.Material.Filled.FormatUnderlined" />
                        <MudMenu Label="Size">
                            <MudMenuItem Label="Increase font size" />
                            <MudMenuItem Label="Decrease font size" />
                        </MudMenu>
                    </MudMenu>
                    <MudMenu Label="Points">
                        <MudMenuItem Label="Bullet" Icon="@Icons.Material.Filled.FormatListBulleted" IconColor="Color.Secondary" />
                        <MudMenuItem Label="Number" Icon="@Icons.Material.Filled.FormatListNumbered" IconColor="Color.Secondary" />
                    </MudMenu>
                    <MudMenu Label="Alignment">
                        <MudMenuItem Label="Left" Icon="@Icons.Material.Filled.FormatAlignLeft" IconColor="Color.Tertiary" />
                        <MudMenuItem Label="Right" Icon="@Icons.Material.Filled.FormatAlignRight" IconColor="Color.Tertiary" />
                    </MudMenu>
                    <MudMenuItem Label="Clear formatting" />
                    <MudMenuItem Label="Headers and footers" />
                </MudMenu>
            </MudMenu>
        </div>
</MudPaper>

<MudDialog Visible="_visible" Style="height: 100%">
    <DialogContent>
        <MudMenu Dense PositionAtCursor>
            <ActivatorContent>
                @{
                    var priority = "1";
                    switch (priority)
                    {
                        case "1":
                            <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #FED6D3">Priority 1</MudChip>
                            break;
                        case "2":
                            <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #FDDFCA">Priority 2</MudChip>
                            break;
                        case "3":
                            <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #F6E8A7">Priority 3</MudChip>
                            break;
                        case "4":
                            <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #C8ECFA">Priority 4</MudChip>
                            break;
                        case "5":
                            <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled" style="font-weight: normal; color: black; background-color: #CEDFFD">Priority 5</MudChip>
                            break;
                        case null:
                            <MudChip T="string" Size="Size.Small" Label="true" Variant="Variant.Filled">None</MudChip>
                            break;
                    }
                }
            </ActivatorContent>
            <ChildContent>
                <div style="min-width: 100px">
                    <MudMenuItem style="font-weight: normal; color: black; background-color: #FED6D3">Priority 1</MudMenuItem>
                    <MudMenuItem style="font-weight: normal; color: black; background-color: #FDDFCA">Priority 2</MudMenuItem>
                    <MudMenuItem style="font-weight: normal; color: black; background-color: #F6E8A7">Priority 3</MudMenuItem>
                    <MudMenuItem style="font-weight: normal; color: black; background-color:#C8ECFA">Priority 4</MudMenuItem>
                    <MudMenuItem style="font-weight: normal; color: black; background-color:#CEDFFD">Priority 5</MudMenuItem>
                    <MudMenuItem>None</MudMenuItem>
                </div>
            </ChildContent>
        </MudMenu>
    </DialogContent>
</MudDialog>

@code {
    public static string __description__ = "4 menu edge cases for visual testing, initial load, in appbar, nested, and in dialog.";
    private readonly string[] _menuList = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
    private bool _visible;
}
